<template>
    <div style="height:100%;position:relative;">
        <!-- <div style="padding: 20px;">
        <el-button>返回</el-button>
      </div> -->
        <commonLayout @getData="getData" :homePlay="true">

            <template slot="sectionFilter" v-if="spaceType==2">
                <el-form>
                    <el-form-item label="楼栋" label-width="50px">
                        <el-select v-model="sectionId" placeholder="请选择楼栋" size="mini" @change="getList">
                            <el-option v-for="item in sectionList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </template>

            <template slot="search">
                <tips></tips>
                <div class="h100">
                    <el-form :model="searchForm" :inline="true" class="h100">
                        <el-form-item>
                            <el-button @click="$router.push('/camera')" type="info" size="small"
                                class="el-icon-video-camera">&nbsp;&nbsp;批量播放</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button size="small" type="primary" @click="$router.push('/homePlayList')">查看首页播放
                            </el-button>
                        </el-form-item>
                        <!-- <el-form-item>
                            <el-button size="small" type="primary" @click="videoGoBack">刷新监控视频
                            </el-button>
                        </el-form-item> -->
                    </el-form>
                </div>
            </template>

            <!-- <cameraList slot="data"></cameraList> -->
            <template slot="data">
                <div class="cameraTable">
                    <el-form :inline="true" :model="filterFrom" class="demo-form-inline" size="small">
                        <el-form-item label="设备名称">
                            <el-input v-model="filterFrom.deviceName" placeholder='请输入设备类名称' clearable></el-input>
                        </el-form-item>
                        <el-form-item label="设备状态">
                            <el-select v-model="filterFrom.deviceStat" placeholder="请选择" clearable>
                                <el-option label="在线" :value="1"></el-option>
                                <el-option label="离线" :value="0"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="filterCameraList">查询</el-button>
                        </el-form-item>
                    </el-form>
                    <el-table :data="tableData" style="width:100%">
                        <el-table-column label="设备名称" prop="channelName"></el-table-column>
                        <el-table-column label="设备类型" prop="cameraType">
                            <template slot-scope="scope">
                                <div>
                                    {{
                          scope.row.cameraType==1 ? '枪机'
                          : scope.row.cameraType==2 ? '球机'
                          : scope.row.cameraType==3 ? '半球'
                          : scope.row.cameraType==5 ? '本地采集输入' : ''
                      }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="设备状态" prop="stat">
                            <template slot-scope="scope">
                                <div>
                                    {{scope.row.stat?'在线':'离线'}}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <div>
                                    <el-button type="primary" size="small" @click="playVideo(scope.row)">播放</el-button>
                                    <el-button type="success" size="small" @click="addVideo(scope.row)"
                                        v-if="!scope.row.flag">添加首页播放
                                    </el-button>
                                    <el-button type="warning" size="small" @click="delVideo(scope.row)"
                                        v-if="scope.row.flag">移除首页播放
                                    </el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </template>

        </commonLayout>
        <el-dialog :title="videoInfo.channelName" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
            <video id="my_video" class="video-js vjs-default-skin vjs-big-play-centered vjs-fluid" data-setup="{}"
                controls muted autoplay="true" preload="../assets/images/play.png">
                <source :src="videoInfo.src" type="application/x-mpegURL" />
            </video>
        </el-dialog>
    </div>
</template>

<script>
import videojs from 'video.js';
import commonLayout from '../../components/common_layout.vue';
import cameraList from './camera_list.vue';
import tips from '../../components/legend_tips.vue';
import {
    getCameraDevInfo,
    getCameraList,
    addHomeVideo,
    getHomeVideo,
    delHomeVideo,
    refreshVideo,
} from '../../url/api';
// import { tableData } from './tableData';
export default {
    data() {
        return {
            filterFrom: {
                deviceStat: '',
                deviceName: '',
            },
            searchForm: {},
            sectionList: [],
            sectionId: '',
            tableData: [],
            cloneData: [], //保存tableData的数据   用来筛选
            dialogVisible: false, //播放弹框
            videoInfo: {
                src: '',
                // type: 'application/x-mpegURL',
                channelName: '',
            }, //播放的对象
            homeVideoList: [], //首页播放列表
            spaceType: 1,
        };
    },
    methods: {
        filterCameraList() {
            console.log('query');
            let { deviceName, deviceStat } = this.filterFrom;
            if (!deviceStat && !deviceName) {
                this.tableData = this.cloneData;
                return;
            }
            if (deviceStat) {
                this.tableData.map((item) => {
                    if (item.stat == deviceStat) {
                        return item;
                    }
                });
            }
            if (deviceName) {
                this.tableData = this.tableData.filter((item) => {
                    if (item.channelName.indexOf(deviceName) > -1) {
                        return item;
                    }
                });
            }
        },
        //刷新视频回调
        /* videoGoBack() {
            refreshVideo().then((res) => {
                this.$message.success('刷新成功');
            });
        }, */
        // 移除首页播放
        delVideo(row) {
            let id = this.getHomeVideoId(row);
            if (!id) {
                this.$message.error('没找到此id');
                return;
            }
            delHomeVideo(id).then((res) => {
                if (res.data.ok) {
                    this.$message.success('移除成功');
                    this.getList(this.sectionId);
                }
            });
        },
        // 添加首页播放
        addVideo(row) {
            delete row.flag;
            if (this.getHomeVideoId(row)) {
                this.$message.info('请勿重复添加！');
                return;
            }
            row.deviceCode = this.sectionId;
            addHomeVideo(row).then((res) => {
                if (res.data.ok) {
                    this.$message.success('添加成功');
                    this.getList(this.sectionId);
                }
            });
        },
        // 获取首页播放监控的id
        getHomeVideoId(row) {
            this.homeVideoList.forEach((item) => {
                if (
                    row.channelSeq == item.channelSeq &&
                    this.sectionId == item.deviceCode
                ) {
                    return item.id;
                }
            });
            return false;
        },
        /* 单独播放 */
        playVideo(row) {
            if (!row.stat) {
                this.$message.warning('设备已离线');
                return;
            }
            // this.videoInfo.src = row.src;
            this.videoInfo.src = `http://10.201.2.8:7086/live/cameraid/${this.sectionId}%24${row.channelSeq}/substream/1.m3u8`;
            this.videoInfo.channelName = row.channelName;
            this.dialogVisible = true;
            this.myPlay(this.videoInfo.src);
        },
        myPlay(src) {
            this.$nextTick(() => {
                let dom = document.getElementById('my_video');
                videojs(dom).src([
                    {
                        src: src,
                        type: 'application/x-mpegURL',
                    },
                ]);
                videojs(dom, { autoplay: true }, function () {
                    this.play();
                });
            });
        },
        handleClose(done) {
            this.videoInfo.src = '';
            this.videoInfo.channelName = '';
            // videojs('my_video').dispose();
            this.dialogVisible = false;
            done();
        },
        getData(val) {
            this.spaceType = val.spaceType;
        },
        getList(id) {
            // let arr = this.Mock.mock({
            //     'array|5':[
            //         {
            //             'deviceCode':'1000034',
            //             'channelSeq|+1':0,
            //             'stat|+1':[1,2]
            //         }
            //     ]
            // }).array

             getCameraDevInfo(id).then((res) => {
                if (res.data.ok) {
                    this.tableData = this.addPrototype(
                        res.data.data.units[0].channels
                    );
                    this.cloneData = this.tableData
                    this.$forceUpdate();
                }
            });
            // this.tableData = [
            //     {
            //         channelName: 'A1-1F分控制室',
            //         channelSeq: 0,
            //         deviceCode: null,
            //         channelType: '1',
            //         cameraType: '1',
            //         access: null,
            //         gpsX: null,
            //         gpsY: null,
            //         stat: 1,
            //     },
            //     {
            //         channelName: 'A1-大门口行李检测中',
            //         channelSeq: 1,
            //         deviceCode: null,
            //         channelType: '1',
            //         cameraType: '1',
            //         access: null,
            //         gpsX: null,
            //         gpsY: null,
            //         stat: 1,
            //     },
            //     {
            //         channelName: 'A1-1F大巴停车区',
            //         channelSeq: 2,
            //         deviceCode: null,
            //         channelType: '1',
            //         cameraType: '1',
            //         access: null,
            //         gpsX: null,
            //         gpsY: null,
            //         stat: 1,
            //     },
            // ];
            // this.cloneData = this.tableData
            console.log(this.tableData);
        },
        /* 根据channelSeq 和 deviceCode判断是否存在，有flag=1，无flag=0 */
        addPrototype(arr) {
            if (arr && arr.length) {
                if (!this.homeVideoList.length) {
                    arr.map((item, index) => {
                        // this.$set(arr[index], 'flag', 1);
                        item.flag = true;
                        return item;
                    });
                    return arr;
                }
                arr.map((item, index) => {
                    this.homeVideoList.map((item1) => {
                        if (
                            item1.channelSeq == item.channelSeq &&
                            this.sectionId == item1.deviceCode
                        ) {
                            item.flag = true;
                        } else {
                            item.flag = false;
                        }
                        return item;
                    });
                });
                return arr;
            }
        },
        getHomeVideoList() {
            getHomeVideo().then((res) => {
                if (res.data.ok) {
                    this.homeVideoList = res.data.data;
                }
            });
        },
    },
    mounted() {
        this.getHomeVideoList();
        getCameraList().then((res) => {
            if (res.data.ok) {
                this.sectionList = res.data.data;
                // this.sectionList = this.Mock.mock({
                //     'array|10-30':{
                //         'id|+1':1000034,
                //         'name':'@ctitle'
                //     }
                // })
                this.sectionId = this.sectionList[0].id;
                setTimeout(() => {
                    console.log('初始胡已查询');
                    this.getList(this.sectionList[0].id);
                }, 0);
            }
        });

        // refreshVideo();
    },
    components: {
        commonLayout,
        cameraList,
        tips,
    },
    beforeDestroy() {
        videojs('my_video').dispose();
    },
};
</script>

<style lang='scss' scoped>
.cameraTable {
    overflow-y: scroll;
}
.cameraTable::-webkit-scrollbar {
    width: 0;
}
.h100 /deep/ .el-form-item__content {
    vertical-align: middle;
}
.video_layout {
    width: 100%;
    position: absolute;
    top: 70px;
    bottom: 0;
    & > div {
        display: inline-block;
        width: 46%;
        height: 46%;
        border: 1px solid #1f807f;
        margin: 10px 30px;
        text-align: center;
        line-height: 20;
        background: rgb(122, 122, 122);
    }
}
</style>
